<!--
 * @Author: 秦福凯
 * @Date: 2024-07-23 18:39:46
 * @Description: 多功能表格
 * @FilePath: \sx-school-oa\src\components\common\table\tableColum.vue
-->
<template>
  <el-table-column
    :align="columu.align || 'center'"
    :fixed="columu.fixed"
    :label="columu.label"
    :min-width="columu.minWidth"
    :prop="columu.key"
    :width="columu.width"
     v-bind="$attrs"
   >
  <template #default="scope">
    <!-- html -->
		<template v-if="columu.ctype === 'html'">
      <span v-html="scope.row[columu.key]"></span>
    </template>

    <!-- 测试 -->
    <template v-else-if="columu.ctype === 'test'">
      测试{{ scope.row }}
    </template>
    <!-- 链接 -->
    <template v-else-if="columu.ctype === 'link'">
      <el-link :icon="columu.icon || ''" style="color: var(--el-color-primary);" type="primary" @click="link(columu.key, scope.row[columu.key], scope.row )">
        {{ scope.row[columu.key] }}
      </el-link>
    </template>
    <!-- 操作 根据数据决定是否显示按钮 -->
    <template v-else-if="columu.ctype === 'edit2'">
      <u-button 
          v-for="item in (scope.row.btns || [])" 
          :color="item.color || '' "  
          :icon="item.icon || ''" 
          :type="item.type || 'primary'" 
          plain 
          size="small" 
        @click="emits('editBtnsClick',item.label,scope.row,columu.key)">
        {{ item.label }}
      </u-button>
    </template>
    <!-- 输入框 -->
      <!-- v-bind="columu"  相当于接受了来自最外部组件的参数 并且通过Table组件透传到该上面 解构 v-bind:columu = {...columu}  -->
    <template v-if="columu.ctype === 'input'">
      <u-input v-model="scope.row[columu.key]" :disabled="disabledBtns(scope.row,'文件名称')" v-bind="columu"></u-input>
    </template>
    <!-- 下拉框 -->
    <template v-if="columu.ctype === 'select'">
      <u-select v-model="scope.row[columu.key]" :multiple="columu.multiple ? columu.multiple : false"  v-bind="columu" :data="columu.data" :props1="columu.props"></u-select>
    </template>
    <!-- 数字输入框 -->
    <template v-if="columu.ctype === 'numberInput'">
      <u-input-number v-model="scope.row[columu.key]" v-bind="columu.option" @blur="blurInput(columu.key, scope.row[columu.key], scope.row)"/>
    </template>
      <!-- 时间选择框 -->
    <template v-if="columu.ctype === 'time'">
      <el-time-picker v-model="scope.row[columu.key]" v-bind="columu" :value-format="'HH:mm'"/>
    </template>

    <!-- 滑块 -->
    <template v-if="columu.ctype === 'switch'">
      <el-switch
        v-model="scope.row[columu.key]"
        inline-prompt
        :active-text="columu.activeText ? columu.activeText : '是'"
        :inactive-text="columu.inactiveText ? columu.inactiveText : '否'"
    />
    </template>
 
    <!-- 日期选择器 -->
    <template v-if="columu.ctype === 'date'">
      <el-date-picker
        v-bind="columu"
        v-model="scope.row[columu.key]"
      />
    </template>
     <!-- 语音 -->
     <template v-if="columu.ctype === 'voice'">
      <audio controls style="height: 32px;">
        <source :src="scope.row.src" type="audio/mpeg">
        <source :src="scope.row.src" type="audio/ogg">
        您的浏览器不支持音频播放
     </audio>
    </template>
    
    <!--文件上传 -->
    <template v-if="columu.ctype === 'upload'">
      <el-upload
				v-model:file-list="fileList"
				:auto-upload="false"
				:limit="1"
				:on-change="(file, fileList) => {fileUpload(file, fileList,scope.row)}"
				:show-file-list="false"
				action="#"
				:accept="columu.accept"
				style="float: left;"
      	>
				<el-button :disabled="disabledBtns(scope.row,'选择文件')" icon="Pointer" size="small" type="primary">选择文件</el-button>
			</el-upload>
				<!-- <el-button :disabled="disabledBtns(scope.row,'上传')" icon="Top" size="small" style="float: right;" type="primary" @click="emits('uploadServer',scope.row)">上传</el-button> -->
    </template>

    <!-- 按钮编辑 每列都有-->
    <template v-else-if="columu.ctype === 'edit'">
      <u-button  v-for="item in columu.data" :color="item.color || '' " 
        :icon="item.icon || ''" 
        :type="item.type || 'primary'" plain 
        size="small" 
        @click="emits('editBtnsClick',item.label,scope.row,columu.key)">
        {{ item.label }}
      </u-button>
    </template>


    <!-- 多链接 -->
    <template v-else-if="columu.ctype === 'links'">
      <el-link v-for="item in columu.data" :icon="item.icon || ''" type="primary" @click="emits('editLinkClick',item.label,scope.row)">
        {{ item.label }}
      </el-link>
    </template>
    <template v-else-if="columu.ctype === 'img'">
      <!-- {{scope.row[columu.key]}} -->
      <el-image
        style="width: 60px; height: 30px"
        :src="scope.row[columu.key]"
        :lazy="true"
        :preview-src-list="[scope.row[columu.key]]"
        :preview-teleported="true"
        >
        <div slot="error" class="image-slot">
          '暂无图片'
        </div>
      </el-image>
     </template>
    <!--字典类型-->
    <template v-else-if="columu.ctype === 'dict'">
      <u-tag 
        :color="scope.row['tagColor'] ? scope.row['tagColor'] : ''" v-bind="columu" 
        :style="{color:scope.row['color'] ? scope.row['color'] : ''}"  v-if="columu.dict">{{ getDictLabel(columu.dict, scope.row[columu.key],columu.dictType )}}</u-tag>
    </template>

    <!-- 普通文本脱敏处理 -->
    <template v-else-if="columu.ctype == 'tm'">
      <span>{{ desensitization(scope.row[columu.key],columu.tmType) }}</span>
    </template>

    <!-- 普通文本 -->
    <template v-else-if="columu.ctype == '' || columu.ctype == undefined || columu.ctype == null">
      <span>{{ scope.row[columu.key] }}</span>
    </template>


    <!-- 如果有子集 -->
    <template v-if="columu.children">
      <TabelColum v-for="item in columu.children" :key="item.key" :columu="item" v-bind="$attrs" @link="link"></TabelColum>
    </template>
  </template>
  </el-table-column>
</template>

<script setup>
import {ref, reactive, defineProps, defineEmits, getCurrentInstance} from 'vue'
import TabelColum from './tableColum.vue'
import {desensitization} from '@/utils/tool.js'
const {proxy} = getCurrentInstance()

let props = defineProps({
  columu: Object,
})
let emits = defineEmits(['link', 'fileUpload', 'blurInput', 'editLinkClick', 'editBtnsClick'])

// 表格事件
function link(key, value, row) {
  emits('link', key, value, row)
}

// 文件上传
function fileUpload(file, list, item) {
  emits('fileUpload', file, item)
}

// 按钮禁用
function disabledBtns(row, key) {
  if (!row.disArr) {
    return

  }
  if (row.disArr.includes(key)) {
    return true
  } else {
    return false
  }
}

function blurInput(key, value, row) {
  emits('blurInput', key, value, row)
}

// 字典匹配
function getDictLabel(data,key,type){
	if(key === undefined || key === '' || key === null){
		return ''
	}
	let type2 = type ==  undefined ? "id" : type
	let labels = []
	labels = data.filter(item => item[type2] == key)
	labels = labels.map(citem => citem.label)
	return labels.join(',')
}


</script>
<style lang='scss' scoped>

</style>
